<template>
  <div class="login-container">
    <el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85">
      <div class="text-center relative">
        <h2>注册用户</h2>
      </div>
      <el-form
        :model="registerData"
        ref="registerFormRef"
        :rules="registerRules"
        class="login-form"
      >
        <el-form-item prop="email">
          <div class="flex-y-center w-full">
            <el-input v-model="registerData.email" />
          </div>
        </el-form-item>
        <el-form-item prop="verificationCode">
          <div class="flex-y-center w-full">
            <el-input v-model="registerData.verificationCode" />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="flex-y-center w-full">
            <el-input v-model="registerData.password" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="register"
            class="flex-y-center w-full"
            >注册新用户</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <div class="flex mt-4 text-sm">
      <div class="text-gray-300">已有账户？</div>
      <div
        class="text-blue-800 cursor-pointer underline hover:decoration-solid"
        @click="router.push('/login')"
      >
        点击登录
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
const registerFormRef = ref(null);
const registerData = reactive({
  email: "",
  verificationCode: "",
  password: "",
});
const registerRules = reactive({
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  verificationCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const register = () => {
  console.log("注册");
};
</script>

<style scoped lang="scss">
.login-container {
  overflow-y: auto;
  background: url("@/assets/images/login-bg.jpg") no-repeat center right;
  display: flex;
  flex-direction: column;
  @apply wh-full flex-center;
  .login-form {
    padding: 30px 10px;
  }
}

.el-form-item {
  background: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}
:deep(.el-input) {
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      /* 通过延时渲染背景色变相去除背景颜色 */
      transition: background-color 1000s ease-in-out 0s;
    }
  }
}
</style>
